<template>
	<div>
		<CommonSearch :config="searchConfig" v-model="tableConfig.searchParams"></CommonSearch>
		<CommonTable :config="tableConfig" ref="commonTable">
			<template #status="{ row }">
				<el-tooltip :content="`状态:${row.status == 1 ? '启用' : '禁用'}`" placement="top">
					<el-switch
						@click="handlerStatus(row)"
						:value="row.status"
						active-color="#13ce66"
						inactive-color="#dcdfe6"
						active-value="1"
						inactive-value="0"
					></el-switch>
				</el-tooltip>
			</template>
		</CommonTable>
	</div>
</template>

<script lang="javascript">
	import { ref, reactive, toRefs, onMounted, getCurrentInstance } from 'vue';
	import { CREATE, UPDATE, DELETE, QUERY } from '@/utils/Const';
	import {
		getDeptListApi,
		createDeptApi,
		updateDeptApi,
		deleteDeptApi
	} from '@/api/system.api';
	import { listToMenu } from '@/utils/Tools';
	import { patternMobile, patternEmail, noNumberToNull } from '@/utils/validate';

	export default {
		name : 'Department',
		setup () {
			let Instance = getCurrentInstance().proxy;
			let commonTable = null;
			let reeselectData = ref([]);
			let data = reactive({
				searchConfig : {
					handlerSearch () {
						return commonTable.fetchData();
					},
					form : [
						{
							type : 'text',
							label : '部门名称:',
							placeholder : '请输入部门名称',
							key : 'deptName'
						},
						{
							type : 'select',
							label : '状态:',
							placeholder : '请选择状态',
							key : 'status',
							options : [
								{
									value : '1',
									label : '正常'
								},
								{
									value : '0',
									label : '停用'
								}
							]
						}
					]
				},
				tableConfig : {
					searchParams : {},
					hasPage : false,
					expandAll : true,
					reqApiMethod : getDeptListApi,
					responseHandler : (payload) => {
						let list = listToMenu({ list : payload.list, idKey : 'deptId' });
						reeselectData.value = list;
						return { list };
					},
					handlerOperate : (payload, row) => {
						data.formConfig.type = payload.butType;
						let formConfig = {
							data : Array.isArray(row) ? row[0] : '',
							...data.formConfig
						};
						formConfig.form[1].hide = false;
						formConfig.form[1].disabled = false;
						switch (payload.butType) {
						case CREATE:
							// 新增顶级部门
							formConfig.form[1].hide = true;
							Instance.$hyDialogForm(formConfig);
							break;
						case 'CREATE_ITEM':
							formConfig.form[1].disabled = true;
							// 新增下级部门
							formConfig.data = {
								parentId : formConfig.data.deptId
							};
							Instance.$hyDialogForm(formConfig);
							break;
						case DELETE:
							Instance.$hyConfirm({
								subTitle : `是否确定删除【${row[0].deptName}】`,
								callback : async (done) => {
									await deleteDeptApi(row[0].deptId);
									done();
									commonTable.fetchData();
								}
							});
							break;
						case UPDATE:
							if (formConfig.data.parentId == 0) {
								formConfig.form[1].hide = true;
							} else {
								formConfig.form[1].disabled = true;
							}
							Instance.$hyDialogForm(formConfig);
							break;
						case QUERY:
							if (formConfig.data.parentId == 0) {
								formConfig.form[1].hide = true;
							} else {
								formConfig.form[1].disabled = true;
							}
							formConfig.disabled = true;
							Instance.$hyDialogForm(formConfig);
							break;
						}
					},
					mergeTable : () => {},
					columns : [
						{
							title : '部门名称',
							field : 'deptName'
						},
						{
							title : '排序',
							field : 'orderNum'
						},
						{
							title : '状态',
							field : 'status'
						},
						{
							title : '创建时间',
							field : 'createTime'
						}
					],
					globalOperate : [
						{
							butType : CREATE,
							name : '新增',
							color : 'primary',
							role : [],
							icon : 'el-icon-plus'
						}
					],
					operateWidth : 230,
					operate : [
						{
							butType : 'CREATE_ITEM',
							type : 'text',
							name : '新增',
							role : [],
							icon : 'el-icon-edit'
						},
						{
							butType : DELETE,
							type : 'text',
							name : '删除',
							role : [],
							icon : 'el-icon-delete'
						},
						{
							butType : UPDATE,
							type : 'text',
							name : '修改',
							role : [],
							icon : 'el-icon-edit'
						},
						{
							butType : QUERY,
							type : 'text',
							name : '查看',
							role : [],
							icon : 'el-icon-search'
						}
					]
				},
				formConfig : {
					type : '',
					async handlerSubmit (params) {
						console.log('params', data.formConfig.type, params);
						switch (data.formConfig.type) {
						case CREATE:
							await createDeptApi(params);
							break;
						case UPDATE:
							await updateDeptApi(params);
							break;
						}
						return commonTable.fetchData();
					},
					form : [
						{
							type : 'text',
							label : '部门Id',
							key : 'deptId',
							hide : true
						},
						{
							type : 'treeselect',
							label : '上级部门',
							placeholder : '请选择上级部门',
							reeselectData : reeselectData,
							dataAdaptiveMap : {
								deptId : 'id',
								deptName : 'label'
							},
							key : 'parentId',
							rules : [
								{ required : true, message : '请选择上级部门', trigger : 'change' },
								{ required : true, message : '请选择上级部门', trigger : 'blur' }
							]
						},
						{
							type : 'text',
							label : '部门名称',
							placeholder : '请输入部门名称',
							maxlength : 30,
							key : 'deptName',
							rules : [
								{ required : true, message : '请输入部门名称', trigger : 'blur' }
							]
						},
						{
							type : 'text',
							label : '显示排序',
							placeholder : '请输入显示排序',
							key : 'orderNum',
							maxlength : 2,
							handlerLimiting : (val) => {
								return noNumberToNull(val);
							},
							rules : [
								{ required : true, message : '请输入显示排序', trigger : 'blur' }
							]
						},
						{
							type : 'text',
							label : '负责人',
							placeholder : '请输入负责人',
							maxlength : 10,
							key : 'leader'
						},
						{
							type : 'text',
							label : '联系电话',
							placeholder : '请输入联系电话',
							maxlength : 11,
							key : 'phone',
							rules : [
								{
									pattern : patternMobile,
									message : '请输入正确的手机号码',
									trigger : 'blur'
								}
							]
						},
						{
							type : 'text',
							label : '邮箱',
							placeholder : '请输入邮箱',
							maxlength : 50,
							key : 'email',
							rules : [
								{
									pattern : patternEmail,
									message : '请输入正确的邮箱',
									trigger : 'blur'
								}
							]
						},
						{
							type : 'radio',
							label : '部门状态:',
							key : 'status',
							defaultValue : '1',
							options : [
								{
									value : '1',
									label : '正常'
								},
								{
									value : '0',
									label : '禁用'
								}
							]
						}
					]
				}
			});

			onMounted(() => {
				commonTable = Instance.$refs['commonTable'];
			});

			const handlerStatus = (row) => {
				let { status, deptName } = row;
				Instance.$hyConfirm({
					subTitle : `是否${status == 0 ? '启用' : '禁用'}【${deptName}】`,
					callback : (done) => {
						done();
						row.status = !status;
						commonTable.fetchData();
					}
				});
			};

			return {
				handlerStatus,
				...toRefs(data)
			};
		}
	};
</script>

<style lang="scss" scoped></style>
